<template>
  <div class="books">
    <!-- 轮播图开始 -->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in images" :key="item.id">
        <h3 class="text">{{ item.text }}</h3>
        <h4 class="page">{{ item.index }}</h4>
        <img :src="item.image" style="height: 400px" />
      </el-carousel-item>
    </el-carousel>
    <!-- 轮播图结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [] /* 轮播图数组 */,
    };
  },
  created() {
    this.getBooKBanner();
  },
  methods: {
    /* 请求开始 */
    getBooKBanner: function () {
      this.$http.get("/v1/book/banner").then((res) => {
        console.log(res.data);
        this.images = res.data;
      });
    },
    /* 请求结束 */
  },
};
</script>

<style>
.text {
  text-align: center;
}
</style>
